<template>
  <div>
    <Tips></Tips>
    <van-checkbox-group v-model="result">
      <!-- 这个禁用效果有点坑，只是看起来不能用，实际上点了还是会有效果 -->
      <van-checkbox
        :disabled="isClicked ? true : false"
        @click="changeChecked(item)"
        v-for="item in cartList"
        :key="item.id"
        class="chk"
        :name="item.product_id"
      >
        <van-swipe-cell>
          <van-card
            :num="item.number"
            :price="item.market_price.toFixed(2)"
            :title="item.goods_name"
            :thumb="item.list_pic_url"
          />
          <template #right>
            <van-button
              @click="delGoods(item)"
              square
              text="删除"
              type="danger"
              class="delete-button"
            />
          </template>
        </van-swipe-cell>
        <van-stepper
          @change="stepChange(item)"
          v-model="item.number"
          v-show="isClicked"
        />
      </van-checkbox>
    </van-checkbox-group>
    <van-submit-bar
      :price="cartTotal.checkedGoodsAmount * 100"
      button-text="提交订单"
      @submit="onSubmit"
    >
      <van-checkbox v-model="checkedAll" :disabled="isClicked ? true : false"
        >全选</van-checkbox
      >
      <template #tip>
        累计共<span>{{ cartTotal.goodsCount }}</span
        >件商品，可点击<van-button
          :type="isClicked ? 'danger' : 'primary'"
          size="mini"
          @click="isClicked = !isClicked"
          >{{ isClicked ? '完成编辑' : '编辑' }}</van-button
        >按钮进行商品数量的修改
      </template>
    </van-submit-bar>
  </div>
</template>

<script>
import Tips from '../components/Tips.vue'
import {
  GetCartDataAPI,
  SelectedGoodsAPI,
  StepAPI,
  DelProductAPI
} from '../request/api'
export default {
  name: 'Cart',
  components: {
    Tips
  },
  data () {
    return {
      // cartlist数组项中的商品数据获取到之后，就循环，
      // 把选中的数据的(check为1)id放到这里
      result: [],
      cartList: [],
      cartTotal: [],
      // 是否显示按钮被点击 true被点击 false未被点击
      isClicked: false
    }
  },
  computed: {
    checkedAll: {
      get () {
        return this.result.length == this.cartList.length ? true : false
      },
      set (val) {
        // console.log('这个是设置的checkedAll的值', val)
        // 拿到cartList每一项的product_id
        let arr = []
        this.cartList.map(val => {
          arr.push(val.product_id)
        })
        let params = {
          isChecked: val ? 1 : 0,
          productIds: arr.join(',')
        }
        SelectedGoodsAPI(params).then(res => {
          if (res.errno == 0) {
            // console.log('这是单击事件的返回值',res.data)
            this.publicShow(res.data)
          }
        })
      }
      // 或者这种判断
      // return this.cartTotal.checkedGoodsCount == this.cartTotal.goodsCount
      //   ? 'true'
      //   : 'false'
    }
  },
  created () {
    this.getdoods()
  },
  methods: {
    onSubmit () {
      this.$toast('点击了提交')
    },
    onClickEditAddress () {
      console.log('点击了修改按钮')
    },
    // 公用的渲染的方法
    publicShow (data) {
      let { cartList, cartTotal } = data
      this.cartList = cartList
      this.cartTotal = cartTotal
      // 清空这个数组，因为页面刷新的时候，如果不清空，会有数据的连续加入
      this.result = []
      // 判断check为1
      this.cartList.map(val => {
        if (val.checked == 1) {
          this.result.push(val.product_id)
        }
      })
    },
    // 获取购物车数据
    getdoods () {
      GetCartDataAPI().then(res => {
        if (res.errno == 0) {
          console.log('这是购物车数据', res)
          this.publicShow(res.data)
        }
      })
    },
    // 商品卡片的单选点击事件
    changeChecked (item) {
      if (this.isClicked) {
        return
      } else {
        let params = {
          isChecked: item.checked == 1 ? 0 : 1,
          productIds: item.product_id.toString()
        }
        SelectedGoodsAPI(params).then(res => {
          if (res.errno == 0) {
            // console.log('这是单击事件的返回值',res.data)
            this.publicShow(res.data)
          }
        })
      }
      // console.log('点击了切换事件')
    },
    // 步进器事件
    stepChange (item) {
      // console.log('步进器的事件', item)
      let params = {
        number: item.number,
        goodsId: item.goods_id,
        id: item.id,
        productId: item.product_id
      }
      StepAPI(params).then(res => {
        if (res.errno == 0) {
          console.log(res.data)
          this.publicShow(res.data)
        }
      })
    },
    // 删除商品
    delGoods (item) {
      console.log('删除商品', item)
      let params = {
        productIds: item.product_id.toString()
      }
      DelProductAPI(params).then(res => {
        if (res.errno == 0) {
          console.log(res.data)
          this.publicShow(res.data)
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.van-submit-bar {
  bottom: 50px;
}
.chk {
  background: #fff;
  padding: 0.1rem 4%;
  border-bottom: 1px solid #ccc;
  /deep/ .van-checkbox__label {
    flex: 1;
  }
}
.van-submit-bar__tip {
  display: flex;
  align-items: center;
}
.van-stepper {
  text-align: right;
}
.delete-button {
  height: 100%;
}
</style>
